{% extends "base.html" %}
{% block title %}{% endblock %}
{% block style %}{% endblock %}
{% block body1 %}{% include "nav.html" %} {% endblock %}
{% block bodyside %}{% endblock %}
{% block bodymain %}
<form action="/search-course" method="post">
        {% csrf_token %}
        <input type="text" name="q">
        <input type="submit" value="搜索">
    </form>
                    <div class="ibox-title">
                        <h3>查询到{{num}}堂课。</h3>
                    </div>
   每页显示 <select id="len">
  <option value="10">10</option>
  <option value="20">20</option>
  <option value="50">50</option>
  <option value="100">100</option>
</select>条记录
                    <div class="ibox-content">
                        <nav aria-label="...">
                            <ul class="pager">
                                <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> 上一页</a></li>
                                <a>当前显示第<span id="nowpage">1</span>页,共<span id="totalpage">{{listindex.0.0}}</span>页</a>
                                <li class="next"><a role="button"  >下一页<span aria-hidden="true">&rarr;</span></a></li>
                            </ul>
                        </nav>
 <table class="table table-condensed table-bordered table-hover"  id="getlist"></table>

                        <div align="right">
<a role="button" id="insert">插入</a>
                        <a role="button" id="change">修改</a>
                        <a role="button" id="del">删除</a>
                    </div>
                    </div>
{% endblock %}
{% block script %}
<script type="text/javascript">
    tokenstrlist=[];
    $("#btn").prop({checked:false});
    var flag=false
    function swapCheck(){
     if(flag){
        $(".check").prop({checked:false});
        flag=false;
        }
        else{
        $(".check").prop({checked:true});
        flag=true;
        }
    }
function nextpage(start,len){
        var blog={'start':start,'len':len};
		$.post("/json/data",blog,function(data,status){
		            data=data.list;
                    str='<tr><th>NO.</th><th>课程</th><th>教师</th><th>教室</th><th>周几</th><th>节数</th><th>周数</th><th>开始时间</th><th>结束时间</th><th><input id="btn" type="checkbox" onclick="swapCheck()"></th></tr>';
		            for(var i in data){
					str=str+'<tr>';
					for(var j in data[i]){
					str=str+'<td>'+data[i][j]+'</td>';
					}
					str=str+'<td><input class="check" type="checkbox" value="'+data[i][0]+'"></td></tr>';
					}
					tokenstrlist.push(str);
					$('#getlist').html(str);
		}
)}
$(document).ready(function(){
		var start= 1;
		var len=10;
        nextpage(start,len);
        $('.next').click(function(){
            var pagenum=parseInt($('#nowpage').text());
            if(tokenstrlist.length>pagenum){
                str=tokenstrlist[pagenum];
                $('#getlist').html(str);
            }
            else {
                var len=parseInt($('#len').val());
            var start=pagenum*len+1;
            nextpage(start,len);
            }
            $('#nowpage').html(pagenum+1);
    });
        $('.previous').click(function(){
            var pagenum=parseInt($('#nowpage').text());
            if(tokenstrlist.length>=pagenum){
                str=tokenstrlist[pagenum-2];
                $('#getlist').html(str);
            }
            else {
                var len=parseInt($('#len').val());
                var start=(pagenum-1)*len;
                nextpage(start,len);
            }
            $('#nowpage').html(pagenum-1);
        })
});
$.ajaxSetup({headers: {"X-CSRFToken": '{{ csrf_token }}'}});
</script>
{% endblock %}
